<script setup lang="ts">
import ShopTitleBar from '@/components/ShopTitleBar.vue'

const currentTab = ref(0) // 当前tab
const tabList = ref(['经营分析', '营业', '菜品', '收款', '财务'])
</script>

<template>
  <view class="h-full overflow-hidden">
    <view class="bg-white px-4 pb-4">
      <AppStatusBar />
      <!--    title start -->
      <ShopTitleBar title="大鸭梨餐厅(上地店)" color="#333">
        <template #suffix>
          <wd-icon name="notification" size="22px" />
        </template>
      </ShopTitleBar>
      <!--    title end    -->
    </view>
    <!--    content start -->
    <view>
      <wd-tabs v-model="currentTab" swipeable animated>
        <template v-for="item in tabList" :key="item">
          <wd-tab :title="`${item}`" custom-class="bg-pagebg p-3">
            <view class="grid grid-cols-1 gap-row-4">
              <CardBar title="经营分析">
                <view class="grid grid-cols-2 mt-4 gap-2 gap-row-4 px-4">
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="营业概览" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="实时营业统计" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="盈亏分析" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="营运目标" class="ml-2" color="#333333" />
                  </view>
                </view>
              </CardBar>
              <CardBar title="营业">
                <view class="grid grid-cols-2 mt-4 gap-2 gap-row-4 px-4">
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="敏感操作统计" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="餐时段营业统计" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="店内订单明细" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="平台外卖订单明细" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="自营外卖订单明细" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="预定单明细" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="餐区/桌台营业统计" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="营业指标同环比" class="ml-2" color="#333333" />
                  </view>
                  <view class="flex items-center">
                    <wd-icon name="picture" size="22px" />
                    <wd-text text="部门营业统计" class="ml-2" color="#333333" />
                  </view>
                </view>
              </CardBar>
            </view>
          </wd-tab>
        </template>
      </wd-tabs>
    </view>
    <!--    content end    -->
  </view>
  <app-tab-bar value="report" />
</template>

<route lang="json5">
{
  layout: 'tabar',
}
</route>
